Route Parameters এবং Query Parameters

Web Development - অ্যাঙ্গুলার (Angular) - রাউটিং এবং নেভিগেশন |

Angular অ্যাপ্লিকেশনে Route Parameters এবং Query Parameters ব্যবহার করে বিভিন্ন ধরণের ডেটা পাস করা যায়, যা এক পৃষ্ঠার মধ্যে বিভিন্ন কম্পোনেন্ট বা ভিউয়ের মধ্যে নেভিগেশন করতে সাহায্য করে। এটি Single Page Applications (SPA) এ ডেটা ট্রান্সফার এবং ইউআরএল (URL) দ্বারা অ্যাপ্লিকেশনের নির্দিষ্ট স্টেট রেটেন করতে গুরুত্বপূর্ণ ভূমিকা পালন করে।

Route Parameters

Route Parameters URL-এর অংশ হিসেবে ব্যবহারকারীর কাছ থেকে ডেটা গ্রহণ করার পদ্ধতি। এটি সাধারণত dynamic routing বা parameterized routes-এ ব্যবহৃত হয়। উদাহরণস্বরূপ, যখন আপনি একটি আইডি বা অন্য কোনো মান URL-এ পাস করতে চান, তখন Route Parameters ব্যবহার করা হয়।

Route Parameters কিভাবে কাজ করে?

আপনি URL প্যাটার্নের মধ্যে নির্দিষ্ট প্যারামিটার ব্যবহার করতে পারেন, যেগুলি ডাইনামিকভাবে URL-এর মাধ্যমে পাওয়া যাবে। যেমন:

/user/:id

এখানে :id হল একটি route parameter, যা URL-এর মধ্যে ডাইনামিক মান গ্রহণ করবে। উদাহরণস্বরূপ, /user/123 অথবা /user/456 এই ধরনের URL এ id প্যারামিটারটি পাস হবে।

Route Parameter এর সাথে রাউটিং কনফিগারেশন

রাউটিং কনফিগারেশনে Route Parameters ব্যবহার করতে হবে। উদাহরণস্বরূপ:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserComponent } from './user/user.component';

const routes: Routes = [
  { path: 'user/:id', component: UserComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

এখানে :id হলো Route Parameter, যেটি UserComponent কম্পোনেন্টে পাস হবে।

Route Parameter Access

Route Parameter-কে Angular কম্পোনেন্টে ActivatedRoute ব্যবহার করে অ্যাক্সেস করা যায়। উদাহরণ:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user',
  template: '<h1>User ID: {{ userId }}</h1>',
})
export class UserComponent implements OnInit {
  userId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.userId = this.route.snapshot.paramMap.get('id')!;
  }
}

এখানে, this.route.snapshot.paramMap.get('id') ব্যবহার করে id প্যারামিটারটি নেওয়া হচ্ছে। snapshot হলো রাউটের বর্তমান স্টেট, এবং paramMap হলো URL থেকে প্যারামিটারগুলোর মান ধারণ করে।

Query Parameters

Query Parameters URL এর অংশ হিসেবে ব্যবহার করা হয় যেখানে ডেটার কিওয়ারি প্যারামিটারগুলি পাস করা হয়। সাধারণত, URL-এর শেষে ?key=value প্যাটার্নে query parameters থাকে। এই প্যারামিটারগুলো সাধারণত ঐতিহ্যগত ওয়েব অ্যাপ্লিকেশনের URL-এ দেখা যায় যেমন ?page=1&sort=desc।

Query Parameters কিভাবে কাজ করে?

Query parameters URL-এর শেষে ?key=value এর মাধ্যমে যুক্ত হয়। একাধিক query parameters থাকলে এগুলোর মধ্যে & দিয়ে আলাদা করা হয়।

যেমন:

/search?term=angular&page=1

এখানে, term এবং page হচ্ছে query parameters।

Query Parameters এর সাথে রাউটিং কনফিগারেশন

Angular-এ Query Parameters ব্যবহার করতে, রাউটিং কনফিগারেশনে পরিবর্তন করতে হবে না, কারণ query parameters URL-এ পাস করা হয় এবং তা আলাদা ভাবে রাউট কনফিগারেশনের অংশ হয় না।

Query Parameters Access

Query Parameters অ্যাক্সেস করতে ActivatedRoute এর queryParamMap ব্যবহার করা হয়। উদাহরণ:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-search',
  template: '<h1>Search Term: {{ searchTerm }}</h1>',
})
export class SearchComponent implements OnInit {
  searchTerm: string = '';
  page: number = 1;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.queryParamMap.subscribe(params => {
      this.searchTerm = params.get('term')!;
      this.page = +params.get('page')!;  // convert to number
    });
  }
}

এখানে:

this.route.queryParamMap.subscribe() ব্যবহার করা হয়েছে query parameters নেওয়ার জন্য।
params.get('term') এবং params.get('page') ব্যবহার করে query parameters অ্যাক্সেস করা হয়েছে।